<template>
    <h1 class="title">小权 组件文档</h1>
    <nav class="nav">
        <router-link v-for="item in routerList" :key="item.path" :to="item.path">{{ item.label }}</router-link>
    </nav>
    <div class="displayArea">
        <router-view></router-view>
    </div>
</template>

<script setup>
    const routerList = [
        { path: '/', label: "Icon" },
        { path: '/button', label: "Button" },
        { path: '/card', label: "Card" },
        { path: '/dialog', label: "Dialog" },
        { path: '/pager', label: "Pager" },
        { path: '/collapse', label: "Collapse" },
        { path: '/tooltip', label: "Tooltip" },
        { path: '/dropdown', label: "Dropdown" }
    ];
</script>

<style scoped lang="scss">
    ::v-deep(#app) {
        background: yellow;
    }
    h1.title {
        text-align: center;
        font-weight: 200;

        color: rebeccapurple;
    }
    //p {
    //    text-align: center;
    //    font-weight: 200;
    //    margin-top: 1em;
    //    font-size: 18px;
    //}
    nav {
        display: flex;
        height: 50px;
        justify-content: space-evenly;
        align-items: center;
    }
    .displayArea {
        //background: var(--xiaoquan-color-primary);
        margin-top: 2em;
    }
    .active {
        border-bottom: 3px solid hsla(160, 100%, 37%, 1);
    }
</style>
